<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getStuCountData, getStuDegreeData } from "@/api/report";
import { ElMessage } from "element-plus";

// 定义图表引用
const stuCountChartRef = ref(null);
const stuDegreeChartRef = ref(null);

// 班级人数信息统计数据
const stuCountChartData = ref({ clazzList: [], dataList: [] });
// 学员学历信息统计数据
const stuDegreeChartData = ref([]);

// 获取班级人数信息统计数据
const getStuCountChartData = async () => {
  const res = await getStuCountData();
  if (res.code) {
    stuCountChartData.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// 获取学员学历信息统计数据
const getStuDegreeChartData = async () => {
  const res = await getStuDegreeData();
  if (res.code) {
    stuDegreeChartData.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// 初始化班级人数柱状图
const initStuCountChart = () => {
  const stuCountChart = echarts.init(stuCountChartRef.value);
  const option = {
    title: {
      text: "班级信息统计",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: stuCountChartData.value.clazzList, // 使用 clazzList 作为 x 轴数据
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "班级人数",
        type: "bar",
        data: stuCountChartData.value.dataList, // 使用 dataList 作为 y 轴数据
        barWidth: 68, // 柱状图宽度
        itemStyle: {
          color: "#5470C6", // 柱状图颜色
        },
      },
    ],
  };
  stuCountChart.setOption(option);
};

// 初始化学员学历信息统计圆角环形图
const initStuDegreeChart = () => {
  const stuDegreeChart = echarts.init(stuDegreeChartRef.value);
  const option = {
    title: {
      text: "学员学历信息统计",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)", // 显示数据项的名称、值和百分比
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "学历",
        type: "pie",
        radius: ["58%", "80%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        data: stuDegreeChartData.value,
      },
    ],
  };
  stuDegreeChart.setOption(option);
};

onMounted(async () => {
  await getStuCountChartData();
  initStuCountChart();
  await getStuDegreeChartData();
  initStuDegreeChart();
});
</script>

<template>
  <h1>学员信息统计</h1>
  <div
    class="chart-container"
    style="display: flex; justify-content: space-between"
  >
    <div ref="stuCountChartRef" style="width: 50%; height: 400px"></div>
    <div ref="stuDegreeChartRef" style="width: 50%; height: 400px"></div>
  </div>
</template>

<style scoped>
h1 {
  color: #5470c6;
  font-size: 24px;
  font-family: "Courier New", Courier, monospace;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
